<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-bind</title>
    <style>
        .bg{
            background-color: yellow;
        }
        .font{
            color:red;
        }
    </style>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <img src="../imgs/1.png" alt="">
        <img v-bind:src="imgsrc" v-bind:title="title">
        <img :src="imgsrc" alt="">

        <span class="bg font">这里有一段测试的文字</span>
        <br>
        <span :class="{bg:show,font:!show}">这里有一段测试的文字</span>
<br>
        <input type="text" name="count" v-model="zj" size="2">
        <input type="button" name="btn" value="+1" v-on:click="add">
        <input type="button" name="btn" value="+1" @click="add">
    </div>

    <script>
        // var stu =new Student(name); 
        // stu.name
        var app=new Vue({
            el:"#app"
            ,data:{  //变量
                imgsrc:"../imgs/2.png"
                ,title:'xiaozhang'
                ,show:true
                ,zj:5
            },methods: { //函数
                add(){
                    this.zj++;
                }
                
            },
        });

        setTimeout(function() {
            app.imgsrc ="../imgs/3.png"
        },3000);
    </script>
</body>
</html>